<!--
 * @Author: your name
 * @Date: 2021-07-31 10:02:11
 * @LastEditTime: 2021-07-31 13:21:43
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \GoodsManagement\src\pages\Welcome.vue
-->
<template>
  <link
    href="https://fonts.googleapis.com/css2?family=Concert+One&display=swap"
    rel="stylesheet"
  />
  <div class="contain-text">
    <h1 class="e-text">
      Welcome To <br />
      Our Program!
    </h1>
  </div>
</template>
<script lang="ts">
export default {};
</script>
<style>
.contain-text {
  position: rel;
  height: 100%;
  min-width: 1000px;
  padding: 40px;
  box-sizing: border-box;
  /* background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; background-blend-mode: multiply,multiply; */
  background-image: linear-gradient(to top, #101924 0%, #3a3a3a 100%);
}
h1.e-text {
  margin: 0;
  padding: 0;
  flex: 1;
  height: 100%;
  line-height: 200%;
  position: relative;
  font-family: "Concert One", cursive;
  text-align: center;
  color: #fff;
}

h1.e-text {
  font-size: 140px;
  animation: 5s h1-rotate ease-in-out infinite;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff;
}

@keyframes h1-rotate {
  0%,
  100% {
    transform: rotate3d(0, 1, 0, -20deg);
  }
  50% {
    transform: rotate3d(0, 1, 0, 20deg);
  }
}
</style>
